<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Renew</title>
</head>
<style>
    html,body{
        /*border: 1px solid red;*/
        margin:0 auto;
        /*设置其宽度，上下边距0 并且自动居中*/
    }
    /*设置字体*/
    h1{
        color: white;
        margin-left: 10px;
    }
    /*网站头部*/
    header{
        display: flex;
        align-items: center;
        /*border: 0.1px solid #33404d；*/
        height: 100px;
        background-image: linear-gradient(to right, #acb6e5 , #86fde8 );
        padding:0;margin:0;
        justify-content: space-between;
    }
    /*导航栏*/
    aside{
        /*height*/
        width: 15%;
        background-image: linear-gradient(to right, #acb6e5 , #86fde8 );
        float: left;
    }
    /*主内容*/
    main{
        background-color: #ffffff;
        width: 85%;
        height: 600px;
        float: right;
    }
    footer{
        clear: both;
        background-color: rgba(255, 255, 255, 0.38);
        height: 100px;
    }
</style>
<style>
    /* 下拉按钮样式 */
    .dropbtn {
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* 容器 <div> - 需要定位下拉内容 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉内容 (默认隐藏) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        border-radius: 10px;
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {
        background-color: #f1f1f1;
        border-radius:10px;
    }

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
        border-radius:10px;
    }

    /* 当下拉内容显示后修改下拉按钮的背景颜色 */
    .dropdown:hover .dropbtn {
        background-color: rgba(79, 163, 255, 0.54);
        border-radius:10px;
    }

    img{
        width: 30px;
        height: 30px;
        border-radius:30px;
    }
    #user{
        display: flex;
        margin-right: 30px;
    }
    #font{
        display: flex;
        justify-content: center;
        margin-left: 3%;
    }
    #first{
        color: white;
    }
    #second{
        color: #ffce45;
        margin-left: 0;
    }

    .tab_list .current {
        background-color: rgb(220, 220, 220);
        color: white;
    }
</style>
<!--导航栏-->
<!--删除边距和填充-->
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    a {
        display:block;
        width:60px;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        background-color: rgba(176, 57, 57, 0.7);
    }
    /*标准哪个选项被选中*/
    li a.active {
        background-color: rgba(203, 203, 203, 0.29);
        color: white;
    }
    ul {
        list-style-type: none;
        padding: 0;
        width: 15%;
        background-color: #f1f1f1;
        height: 100%; /* 全屏高度 */
        position: fixed;
        overflow: auto; /* 如果导航栏选项多，允许滚动 */
        margin: 0 auto;
    }

    li a {
        width: 100%;
        height: 50px;
        display: block;
        color: #8d8d8d;
        padding: 8px 16px;
        text-decoration: none;

    }

    /* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
        width: 100%;
        background-color: rgb(220, 220, 220);
        color: white;
        display: block;
        padding: 8px 16px;
        text-decoration: none;

    }
</style>
<body>
<header>
    <span id="font">
        <h1 id="first">Re</h1>
        <h1 id="second">new</h1>
    </span>

    <div id="user">
        <img src="../img/user8-128x128.jpg">
        <div class="dropdown">
            <span class="dropbtn">账户名</span>
            <div class="dropdown-content">
                <a href="#">退出登录</a>
                <a href="#">个人信息</a>
            </div>
        </div>
    </div>
</header>
<aside>
        <div class="tab_list">
            <ul>
                <li class="current"><a href="#">健康查询</a></li>
                <li><a href="#">体检预约</a></li>
                <li><a href="#">信息修改</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
</aside>
<main>
    <div class="tab_con">
        <div class="item" style="display: block;">
            页面1
        </div>
        <div class="item">
            页面2
        </div>
        <div class="item">
            页面3
        </div>
        <div class="item">
            页面4
        </div>
    </div>
</main>
<footer>

</footer>
</body>
<script type="text/javascript">
    //获取元素
    var tab_list = document.querySelector(".tab_list");
    var lis = tab_list.querySelectorAll("li");
    var items = document.querySelectorAll(".item");
    //遍历tab标签
    for(var i=0; i<lis.length; i++){
        // 为标题添加索引
        lis[i].setAttribute("data-index",i);

        items[1].style.display = "none";
        items[2].style.display = "none";
        items[3].style.display = "none";

        //绑定事件
        lis[i].onclick = function() {
            //将其他tab的class清楚掉，排他思想
            for(var i=0; i<lis.length; i++){
                lis[i].className = "";
            }
            this.className = "current";

            // 切换标签内容
            var index = this.getAttribute("data-index");
            for(var i=0; i<items.length; i++){
                items[i].style.display = "none";
            }
            items[index].style.display = "block";
        }
    }
</script>
</html>
